<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link type="text/javascript" href="js/el.css" rel="stylesheet">
    <script type="text/javascript" src="js/axios.min.js"></script>
    <script type="text/javascript" src="js/vue.js"></script>
    <script  src="js/el.js"></script>
    <style type="text/css">
        img{
            display: none;
        }
    </style>
</head>
<body>
<div id="box">
    <p>
        <span>商品名称:</span>
        <input type="text" v-model="title">
        <input type="button" value="查询" @click="cha()">
    </p>
    <table border="1">
        <thead>
        <tr>
            <th>序号</th>
            <th>新闻标题</th>
            <th>新闻内容</th>
            <th>时间</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(news,index) in pageInfo.data" :key="news.nid" v-show="pageInfo.pageNow<=pageInfo.pages">
            <td>{{(pageInfo.pageNow -1) * pageInfo.pageSize + index +1}}</td>
            <td v-html="news.title"></td>
            <td>{{news.content}}</td>
            <td>{{news.createtime}}</td>
        </tr>
        </tbody>
    </table>
    <div class="block">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                @prev-click="prePages"
                @next-click="nextPages"
                :page-sizes="[5, 10, 15]"
                :page-size=pageInfo.pageSize
                layout="total, sizes, prev, pager, next, jumper"
                :total=pageInfo.total>
        </el-pagination>
    </div>

</div>
</body>
<script type="text/javascript">
    new Vue({
        el:'#box',
        data:{
            pageInfo:'',
            title:''
        },
        methods:{
            searchPage(pageNow,pageSize,title){
                axios({
                    url:'news',
                    params:{
                        pageNow:pageNow,
                        pageSize:pageSize,
                        title:title
                    }
                }).then((rs)=>{
                    console.log(rs)
                    this.pageInfo = rs.data;
                })
            },
            cha(){
                this.searchPage(1,this.pageInfo.pageSize,this.title);
            },
            prePages(){
                this.pageInfo.pageNum -= 1;
                this.searchPage(this.pageInfo.pageNum,this.pageInfo.pageSize,this.title);
            },
            nextPages(){
                this.pageInfo.pageNum += 1;
                this.searchPage(this.pageInfo.pageNum,this.pageInfo.pageSize,this.title);
            },
            handleSizeChange(val){
                this.searchPage(this.pageInfo.pageNum,val,this.title);
            },
            handleCurrentChange(val){
                this.searchPage(val,this.pageInfo.pageSize,this.title);
            }
        },
        created(){
            this.searchPage(1,5,this.title);
        }
    })
</script>
</html>